<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	body {background: #78bc43;}
	#c1,span {background: yellow;}
	</style>
	<script type="text/javascript">
	window.onload = function () {
		var oC = document.getElementById('c1');
		var oGC = oC.getContext('2d');

		//保存路径和恢复路径的作用是，可以选择性针对
		oGC.save();					//保存路径

		oGC.fillStyle = 'red';		//写在save里面，如果在外面则会作用于全局

		oGC.beginPath();
		oGC.moveTo(100,100);
		oGC.lineTo(200,200);
		oGC.lineTo(400,200);
		// oGC.closePath();			//闭合（起点和终点连接。填充可以不用闭合）
		oGC.fill();

		oGC.restore();				//恢复路径

		oGC.beginPath();
		oGC.moveTo(100,200);
		oGC.lineTo(200,300);
		oGC.lineTo(400,300);
		oGC.fill();
	}
	</script>
</head>
<body>
	<canvas id="c1" width="600" height="400"> <!-- 宽高在这里设置 -->
		<span>不支持canvas的浏览器</span>
	</canvas>
</body>
</html>